<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="swiperImg" autoplay :interval="5000" circular indicator-dots>
			<swiper-item>
				<image src="../../static/摆台定制.jpg" style="height: 100%;width: 100%;"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/摆台定制.jpg" style="height: 100%;width: 100%;"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/摆台定制.jpg" style="height: 100%;width: 100%;"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/摆台定制.jpg" style="height: 100%;width: 100%;"></image>
			</swiper-item>
		</swiper>
		<!-- 标题、价格 -->
		<view class="title">
			<view class="describe">校园约拍 | 一部青春的故事</view>
			<view class="price">
				<view class="iconfont icon-aixin1" style="margin-right: 30rpx;"></view>
				<view class="iconfont">￥79</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="remark">
			<view class="iconfont icon-pinglun" style="width: 60px;" @click="showPopup">评论:</view>
			<view class="message">好看! 好看! 好看! 好看!好看!好看好看 </view>
			<view class="iconfont icon-dianzan"></view>
		</view>
		<!-- 商家、往期作品、联系 -->
		<view class="merchantDetails">
			<!-- 商家 -->
			<view class="mine">
				<view class="mine-left" @click="goShopping_Mer">
					<image class="avatar" src="../../static/default-avatar.png"></image>
					<view class="username">柯文日常</view>
				</view>

				<view class="mine-right">
					<view class="" style="margin-right: 20rpx;">
						<u-tag size="minu" text="档期查看" type="warning" icon="clock" plain @click="showCalendar = true"
							style="margin-right: 30rpx;"></u-tag>
					</view>
					<view class="" style="margin-right: 20rpx;">
						<u-tag size="minu" text="联系卡" icon="account" plain @click="showCard"></u-tag>
					</view>
					<!-- <view class="contactCard" @click="showCard" style="margin-left: 30rpx;background-color: aqua;">
						联系卡
					</view> -->
					<view class="grade">
						<image class="avatar" :src="shopLevel.gradeImg"></image>
						<view class="number">{{shopLevel.grade}}</view>
					</view>

				</view>
			</view>
			<c-calendar title="档期查看" :formatter="formatter" :show="showCalendar" :readonly=true @close="close"
				ref="calendar" />
			<!-- 关注、联系等按钮 -->
			<view class="block">
				<view class="btn">
					<image src="../../static/关注.png" mode="aspectFit"></image>
					<view>关注</view>
				</view>
				<view class="btn" @click="contactShop(1)">
					<image src="../../static/聊一聊 (2).png" mode="aspectFit"></image>
					<view>聊一聊</view>
				</view>
				<view class="btn" @click="goOrder()">
					<image src="../../static/下单.png" mode="aspectFit"></image>
					<view>马上下单</view>
				</view>
				<view class="btn">
					<image src="../../static/加入购物车.png" mode="aspectFit"></image>
					<view>加入购物车</view>
				</view>

			</view>
			<!-- 套餐概览 -->
			<view class="package">
				<view class="title">
					<text>套餐概览<text style="font-weight:500;">（{{packageOverviewList.packageType}})</text></text>
				</view>
				<view class="conent">
					<view class="shotCount">
						<view class="icon">
							<u-icon name="camera" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								拍摄张数
							</view>
							<view class="count">
								{{packageOverviewList.shotCount}}张
							</view>
						</view>
					</view>
					<view class="shotCount">
						<view class="icon">
							<u-icon name="cut" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								精修张数
							</view>
							<view class="count">
								{{packageOverviewList.refinementCount}}张
							</view>
						</view>
					</view>
					<view class="shotCount">
						<view class="icon">
							<u-icon name="coupon" color="#707070" size="32"></u-icon>
						</view>
						<view class="right">
							<view class="subTitle">
								底片
							</view>
							<view class="count">
								赠送{{packageOverviewList.negativeFilm}}张
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 往期作品 -->
			<view class="previousWorks">
				<view class="title">往期作品</view>
				<!-- 小红书界面组件 -->
				<copyRedBook :list="list" style="padding: 0;"></copyRedBook>
			</view>
		</view>

		<!-- 弹窗联系卡 -->
		<template>
			<u-popup closeable @close="closeCard()" :show="cardState" mode="bottom">
				<view class="dialogCard">
					<view class="photoText">电 话：12345678910</view>
					<view class="wxText">
						<text>微 信：</text>
						<u--image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" width="80px" height="80px"
							shape="square"></u--image>
					</view>
					<u-button text="平台消息联系" type="primary" @click="contactShop(1)"></u-button>
				</view>
			</u-popup>
		</template>

		<!-- 弹窗的评论 -->
		<template>
			<u-popup closeable @close="closeShow" :show="show" mode="bottom" style="position: relative;">
				<scroll-view class="container-remark" scroll-y>
					<view class="numberRemark">3719条评论</view>
					<view>
						<view class="UserRemarkBox" v-for="item in 10">
							<image class="UserAvatar" src="../../static/default-avatar.png"></image>
							<view class="UserRemark">
								<view class="titleRemark">抱萝卜的逗逼兔子</view>
								<text style="height: 67rpx;margin: 10rpx 0;padding: 20rpx;">{{userRemarked}}</text>
								<view class="reply">
									<view>五小时前 · 四川</view>
									<view @click="reply">回复</view>
									<view class="iconfont"><text class="iconfont icon-aixin1"></text>1.1万</view>
									<view class="iconfont icon-hunyin"></view>
								</view>
								<view class="moreReply">—展开2089条回复<text class="iconfont icon-xiangxiajiantou"></text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="inputArea">
					<view class="u-demo-block ipt">
						<view class="u-demo-block__content">
							<u--input :customStyle="{backgroundColor: '#f3f3f3',}" v-model="iptVal"
								placeholderClass="placeholderStyle" :placeholder="placeholder" border="surround"
								shape="circle" suffixIconStyle="{color: #909399;}" ref="ipt">

							</u--input>

						</view>
					</view>
					<view class="iptBtn">
						<u-button type="primary" shape="circle" text="发送">


						</u-button>
					</view>
				</view>
				<view class="upload">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
						:previewImage="false">
						<u-icon name="photo-fill" color="#909399" size="28"></u-icon>

					</u-upload>
				</view>
				<view class="showImg" v-if="showImg" style="padding: 5rpx 0rpx 30rpx 10rpx; ">
					<u--image :showLoading="true" :src="fileList1" width="80px" height="80px" @click="click"></u--image>
				</view>



			</u-popup>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholder: '善语结善缘，恶言伤人心',
				showImg: false,
				fileList1: 'https://cdn.uviewui.com/uview/album/1.jpg',
				show: false,
				userRemarked: '好容易多可以凉快两天，全给老子整没了',
				cardState: false,
				// 日历卡片显示
				showCalendar: false,
				iptVal: '',
				// 商家客单量
				merchantOrderVolume: 60,
				// 套餐概览
				packageOverviewList: {
					// 套餐类型
					packageType: '写真',
					// 拍摄张数
					shotCount: 60,
					// 精修张数
					refinementCount: 6,
					// 底片
					negativeFilm: 6,
				},

				// 作品集数据
				list: [{
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, ]
			};
		},
		methods: {
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if ((day.month === month && day.day >= date) || day.month > month) {
					/* 规则：查看源码 {@link /components/c-calendar/month.vue line 21}*/
					day.zao = Math.round(Math.random())
					day.zhong = Math.round(Math.random())
					day.wan = Math.round(Math.random())
				}
				return day
			},
			// 关闭日期卡
			close() {
				this.showCalendar = false
			},
			showPopup() {
				this.show = true
			},
			closeShow() {
				this.show = false
			},
			showCard() {
				this.cardState = true
			},
			closeCard() {
				this.cardState = false
			},
			//前往商家页面
			goShopping_Mer() {
				uni.navigateTo({
					url: '../../subPackages_pipei/shop/shop'
				})
			},
			// 前往下单页面
			goOrder() {
				uni.navigateTo({
					url: '../../pages/map/orders'
				})
			},
			// 平台联系商家
			contactShop(id) {
				uni.navigateTo({
					url: `/pages/message/messageroom/messageroom?id=${id}`
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.showImg = false
			},
			// 新增图片
			async afterRead(event) {
				this.showImg = true
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			reply() {
				this.placeholder = '回复 @派大星'
				// this.$refs.ipt.focus = true
			}
		},
		computed: {
			shopLevel() {
				if (this.merchantOrderVolume >= 1 && this.merchantOrderVolume <= 10) {
					return {
						grade: '白银摄影师',
						gradeImg: '../../static/白银摄影师.png'
					}
				} else if (this.merchantOrderVolume >= 11 && this.merchantOrderVolume <= 50) {
					return {
						grade: '高级摄影师',
						gradeImg: '../../static/高级摄影师.png'
					}
				} else if (this.merchantOrderVolume >= 51 && this.merchantOrderVolume <= 100) {
					return {
						grade: '黄金摄影师',
						gradeImg: '../../static/黄金摄影师.png'
					}
				} else if (this.merchantOrderVolume > 100) {
					return {
						grade: '大神级摄影师',
						gradeImg: '../../static/大神级摄影师.png'
					}

				}
				return {
					grade: '普通摄影师',
					gradeImg: '../../static/普通摄影师.png'
				}
			}
		}
	}
</script>

<style lang="scss">
	.upload {
		position: absolute;
		bottom: 18rpx;
		right: 180rpx;
	}

	.inputArea {
		position: fixed;
		bottom: 3px;
		width: 100%;
		display: flex;
		background-color: #fff;
		border-top: #cecece;

		.ipt {
			width: 80%;
			margin-top: 15rpx;
		}

		.iptBtn {
			width: 15%;
			margin-left: 2%;
			margin-top: 15rpx;
		}
	}

	.container-remark {
		height: 800rpx;
		padding: 20rpx;



		.numberRemark {
			margin-top: 20rpx;
			text-align: center;
		}

		.UserRemarkBox {
			display: flex;
			margin-top: 20rpx;

			.UserAvatar {
				height: 50rpx;
				width: 50rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.UserRemark {
				.titleRemark {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
					margin-bottom: 10rpx;
				}

				.reply {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}

				.moreReply {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}
			}
		}
	}

	.container {
		width: 100%;

		.swiperImg {
			height: 800rpx;
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			height: 100rpx;
			line-height: 100rpx;
			padding: 0rpx 40rpx;
			margin-top: 10rpx;
			font-size: $uni-font-size-sm;
			background-color: $uni-bg-color;

			.describe {

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.price {
				display: flex;
				justify-content: space-between;


			}
		}


		.remark {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			padding: 20rpx 30rpx;
			background-color: $uni-bg-color;
			margin-top: 10rpx;

			.message {
				width: 250px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.merchantDetails {
			background-color: $uni-bg-color;



			.mine {
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-sm;
				padding: 40rpx 30rpx;
				margin-top: 10rpx;

				.mine-left {
					display: flex;
					justify-content: center;
					align-items: center;

					.avatar {
						height: 40rpx;
						width: 40rpx;
						padding: 0 10rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}

				.mine-right {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.grade {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.avatar {
							height: 40rpx;
							width: 40rpx;
							padding: 0 10rpx;
							margin-right: 8rpx;
						}
					}

					.number {
						margin-left: 10rpx;
					}
				}
			}

			.block {
				height: 100rpx;
				margin: 10rpx 0;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				font-size: $uni-font-size-sm;

				.btn {
					height: 100%;
					width: 20%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					image {
						height: 70%;
						margin-bottom: 10rpx;
						width: 30px;
					}
				}
			}

			.previousWorks {
				background-color: $uni-bg-color;

				.title {
					font-size: $uni-font-size-lg;
					font-weight: 900;

				}

			}
		}

		.dialogCard {
			height: 500rpx;
			width: 720rpx;
			padding: 50rpx;
			box-sizing: border-box;

			.photoText {
				font-size: $uni-font-size-lg;
				margin: 20rpx 0;
			}

			.wxText {
				display: flex;
				justify-content: left;
				align-items: center;
				font-size: $uni-font-size-lg;
				margin: 20rpx 0;
				margin-bottom: 50rpx;
			}
		}
	}

	.placeholderStyle {
		color: #6b6b6b;
		font-size: 28rpx;
		padding-left: 20rpx;
	}

	.package {
		.title {
			font-size: $uni-font-size-lg;
			font-weight: 900;
		}

		.conent {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.shotCount {
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				.icon {
					margin-right: 16rpx;
				}

				.right {
					display: flex;
					flex-direction: column;

					font-size: $uni-font-size-sm;

					.subTitle {
						color: #7a7a7a;
					}

					.count {
						margin-top: 8rpx;
						color: #000;
						font-weight: 900;
					}
				}
			}
		}
	}
</style>